import React from 'react'
import Page1 from '@/views/page1.js'
import Page2 from '@/views/page2.js'
import Page3 from '@/views/page3.js'
import Page4 from '@/views/page4.js'
import Page5 from '@/views/page5.js'
import Page6 from '@/views/page6.js'
import Page7 from '@/views/page7.js'
import Page8 from '@/views/page8.js'
import Page9 from '@/views/page9.js'
import Page10 from '@/views/page10.js'
import Countain from './assets/css/index'
// 导入带括号
import { HashRouter, Link,NavLink,Redirect,Route,Switch, withRouter } from 'react-router-dom'
function App(props) {
  return (
    <div>
      <Countain>
        {/* link只有to属性 后面接字符串*/}
          <NavLink  to='/'>/</NavLink>
          <NavLink exact to='/page1' activeClassName='title'>page1</NavLink>
          <NavLink exact to='/page2' activeClassName='title'>page2</NavLink>
          <NavLink exact to='/page3' activeClassName='title'>page3</NavLink>
          <NavLink exact to='/page4' activeClassName='title'>page4</NavLink>
          <NavLink exact to='/page5' activeClassName='title'>page5</NavLink>
          <NavLink exact to='/page6' activeClassName='title'>page6</NavLink>
          <NavLink exact to='/page7' activeClassName='title'>page7</NavLink>
          <NavLink exact to='/page8' activeClassName='title'>page8</NavLink>
          <NavLink exact to='/page9' activeClassName='title'>page9</NavLink>
          <NavLink exact to='/page10' activeClassName='title'>page10</NavLink>
          {/* 所以exact大于 Switch  */}
          <Switch>
          <Route path='/' exact component={Page1}></Route>
          <Route path='/page1' exact component={Page1}></Route>
          <Route path='/page2' exact component={Page2}></Route>
          <Route path='/page3' exact component={Page3}></Route>
          <Route path='/page4' exact component={Page4}></Route>
          <Route path='/page5' exact component={Page5}></Route>
          <Route path='/page6' exact component={Page6}></Route>
          <Route path='/page7' exact component={Page7}></Route>
          <Route path='/page8' exact component={Page8}></Route>
          <Route path='/page9' exact component={Page9}></Route>
          <Route path='/page10' exact component={Page10}></Route>
          </Switch>
      </Countain>
    </div>
  )
}
export default withRouter(App)